<template>
  <div class="table-box">
    <ProTable ref="proTable" title="门店列表" row-key="id" :columns="columns" :request-api="getStoreList">
      <!-- 表格 header 按钮 -->
      <!-- <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDialog('新增')"> 新增门店 </el-button>
      </template> -->
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-auth="'set'" type="primary" link :icon="EditPen" @click="onSetTime(scope.row.id)"> 餐段设置 </el-button>
        <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="openDialog('编辑', scope.row)"> 编辑 </el-button>
        <!-- <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button> -->
      </template>
    </ProTable>
    <StoreDialog ref="dialogRef" />
    <TimeIntervalDialog ref="timeIntervalDialogRef" />
  </div>
</template>

<script setup lang="ts" name="store">
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import StoreDialog from "@/views/operation/components/StoreDialog.vue";
import TimeIntervalDialog from "@/views/operation/components/TimeIntervalDialog.vue";
import { Operation } from "@/api/interface";
import { EditPen } from "@element-plus/icons-vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getStoreList, createStore, editStore, editStoreMarket, getStoreMarket } from "@/api/modules/operation";

const proTable = ref<ProTableInstance>();

const columns: ColumnProps<Operation.ResDepartmentList>[] = [
  { type: "index", label: "序号", width: 60 },
  { prop: "storeName", sortable: true, label: "门店名称", minWidth: 240, align: "left", search: { el: "input" } },
  { prop: "id", sortable: true, label: "门店ID", minWidth: 120, align: "left" },
  { prop: "address", sortable: true, label: "门店地址", minWidth: 120, align: "left" },
  { prop: "linkMan", sortable: true, label: "门店联系人", minWidth: 120, align: "left" },
  { prop: "mobile", sortable: true, label: "联系电话", minWidth: 160, align: "left" },
  {
    prop: "status",
    label: "状态",
    sortable: true,
    align: "left",
    minWidth: 120,
    enum: [
      { label: "启用", value: 1 },
      { label: "禁用", value: 2 }
    ]
  },
  { prop: "operation", label: "操作", fixed: "right", width: 180 }
];
// // 删除部门
// const deleteAccount = async (params: Operation.ResDepartmentList) => {
//   await useHandleData(deleteStore, { id: params.id }, `删除【${params.name}】部门`);
//   proTable.value?.getTableList();
// };

// 打开 drawer(新增、查看、编辑)
const dialogRef = ref<InstanceType<typeof StoreDialog> | null>(null);
const openDialog = (title: string, row: Partial<Operation.ResDepartmentList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? createStore : title === "编辑" ? editStore : undefined,
    getTableList: proTable.value?.getTableList
  };
  dialogRef.value?.acceptParams(params);
};
const timeIntervalDialogRef = ref<InstanceType<typeof TimeIntervalDialog> | null>(null);
const onSetTime = async (id: number) => {
  await getStoreMarket({ storeId: id }).then(res => {
    // if (res.data) {
    openTIDialog("设置", res.data);
    // } else {
    //   openTIDialog("设置", [
    //     { id: 0, storeId: id, name: "", starTime: "", endTime: "", status: false },
    //     { id: 0, storeId: id, name: "", starTime: "", endTime: "", status: false },
    //     { id: 0, storeId: id, name: "", starTime: "", endTime: "", status: false },
    //     { id: 0, storeId: id, name: "", starTime: "", endTime: "", status: false },
    //     { id: 0, storeId: id, name: "", starTime: "", endTime: "", status: false }
    //   ]);
    // }
  });
};
const openTIDialog = (title: string, list: Partial<Operation.ResDepartmentList> = {}) => {
  const params = {
    title,
    isView: false,
    list: list,
    api: editStoreMarket,
    getTableList: proTable.value?.getTableList
  };
  timeIntervalDialogRef.value?.acceptParams(params);
};
</script>
